<script setup>
import { ref, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import codeList from './codeList.vue'
import dataStatistics from './dataStatistics.vue'
const activeKey = ref(1)
const queryNmme = ref('')
const router = useRouter()
const addPromote = () => {
	router.push('craeteCode')
}
const changeActiveKey = (val) => {
	activeKey.value = val
}
const handleClick = (tab, event) => {
	// console.log(tab.props.name)
	// if (tab.props.name === 2) {
	// 	console.log(DataStatistics)
	// }
}
</script>
<template>
	<div class="promote">
		<el-tabs v-model="activeKey" @tab-click="handleClick">
			<el-tab-pane label="推广码列表" :name="1">
				<div class="container">
					<div class="container-header">
						<el-button @click="addPromote" style="height: 36px" color="#1890ff" type="primary">新建推广码</el-button>
						<el-input
							style="width: 220px; height: 36px"
							v-model="queryNmme"
							class="w-50 m-2"
							placeholder="搜索推广码名称"
							:suffix-icon="Search"
						/>
					</div>
					<codeList @changeActiveKey="changeActiveKey" />
				</div>
			</el-tab-pane>
			<el-tab-pane label="数据统计" :name="2" :lazy="true"
				><div class="container">
					<dataStatistics /></div
			></el-tab-pane>
		</el-tabs>
		<div class="header-helper">
			<div class="header-item">
				<el-icon class="help-icon"><Reading /></el-icon> 功能说明
			</div>
			<el-divider direction="vertical" />
			<div class="header-item">
				<el-icon class="help-icon"><Collection /></el-icon>使用教程
			</div>
		</div>
	</div>
</template>
<style scoped lang="scss">
:deep(.el-tabs) {
	--el-tabs-header-height: 50px;
}
:deep(.el-tabs__item) {
	font-size: 16px;
}
:deep(.el-tabs__item.is-active) {
	font-weight: 600;
}
:deep(.el-tabs__nav-wrap::after) {
	display: none;
}
:deep(.el-tabs__header) {
	position: relative;
	height: 50px;
	margin-top: 15px;
	margin-left: 8px;
	padding-left: 16px;
	line-height: 50px;
	font-size: 16px;
	background-color: #fff;
}
.promote {
	position: relative;
	.header-helper {
		position: absolute;
		left: 232px;
		top: 25px;
		display: flex;

		align-items: center;
		background-color: #f5f5f5;
		height: 32px;
		border-radius: 2px;
		line-height: 32px;
		padding: 0 12px;
		font-size: 14px;
		color: #1890ff;
		.header-item {
			display: flex;
			align-items: center;
			cursor: pointer;
		}
		.help-icon {
			font-size: 16px;
			margin-right: 5px;
		}
	}
}

.container {
	padding: 16px;
	overflow-y: auto;
	-webkit-box-flex: 1;
	flex: 1;
	:deep(.el-dropdown) {
		color: #1890ff;
	}

	.container-header {
		display: flex;
		justify-content: space-between;
		width: 100%;

		margin-bottom: 16px;
		font-size: 13px;
		.top-prompt {
			margin-bottom: 16px;
			padding: 12px 19px;
			background: #eaf2ff;
			border-radius: 2px;
			border: 1px solid #4398ff;
			font-size: 13px;
			font-weight: 400;
			color: #074b9a;
			line-height: 20px;
		}

		.emit-moment {
			display: -webkit-box;
			display: flex;
			-webkit-box-align: center;
			align-items: center;
		}
	}
	.promote-wrap {
		background: #fff;
		box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%);
		border-radius: 2px;
		padding: 24px 24px 16px;
	}
}
</style>
